<template>
  <el-dialog title="人员位置详情" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" :before-close="close">
    <div>
      <ul class="oneUl">
        <li>
          <span>员工姓名:</span>
          <span>{{ recordData.name }}</span>
        </li>
        <li>
          <span>RFID:</span>
          <span>{{ recordData.rfid }}</span>
        </li>
        <li>
          <span>门禁ID:</span>
          <span>{{ recordData.accessCardID }}</span>
        </li>
      </ul>
      <ul class="twoUl">
        <li>
          <span>部门:</span>
          <span>{{ recordData.department }}</span>
        </li>
        <li>
          <span>职务:</span>
          <span>{{ recordData.job }}</span>
        </li>
        <li>
          <span>工种:</span>
          <span>{{ recordData.work }}</span>
        </li>
      </ul>
    </div>
    <ListTable ref="RefTableList" :page="true" :loading="tableLoading" :table-data="tableData" :table-col="tableCol"></ListTable>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  import listMixin from '@/mixins/list'
  export default {
    mixins: [dialogEditMixin, listMixin],
    data() {
      return {
        tableLoading: false,
        // 人员信息
        recordData: {
          name: '',
          RFID: '',
          accessCardID: '',
          department: '',
          job: '',
          work: ''
        },
        tableData: [],
        tableCol: [
          { prop: 'name', label: '序号' },
          { prop: 'loginName', label: '所在区域' },
          { prop: 'name', label: '读卡设备名称' },
          { prop: 'loginName', label: '进入区域时间' },
          { prop: 'name', label: '离基站位置' },
          { prop: 'loginName', label: '离洞口位置' },
          { prop: 'name', label: '进入隧道时间' }
        ],
        apiKey: {
          search: '/User/',
          add: '/User',
          put: '/User/'
        }
      }
    },
    watch: {
      searchValue: function (newValue, oldValue) {
        let people = newValue.employee
        this.recordData = {
          name: people.name,
          rfid: people.rfid,
          accessCardID: people.accessCardID
        }
      }
    },
    methods: {
      resetFormData() {
        this.formData = {
          loginName: '',
          name: '',
          password: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .oneUl,
  .twoUl {
    margin: 0;
    padding: 0;
    display: flex;
    li {
      flex: 1;
      list-style: none;
    }
  }
</style>
